<template>
  <div class="login">
    <LoginForm @submit-validate="login"></LoginForm>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import { SET_TOKEN, SET_USERNAME } from "@/store/mutation-type";
import LoginForm from "@/components/LoginForm";
import { login } from "@/http/apis";
export default {
  components: {
    LoginForm,
  },
  data() {
    return {};
  },
  methods: {
    ...mapMutations([SET_TOKEN, SET_USERNAME]),
    async login(obj) {
      try {
        const {
          meta: { msg },
          data: { token, username },
        } = await login(obj);
        this.$message({
          message: msg,
          type: "success",
          duration: 2000,
        });
        this.timer = setTimeout(() => {
          this[SET_TOKEN](token);
          this[SET_USERNAME](username);
          this.$router.push({
            name: "Users",
          });
        }, 2000);
      } catch (err) {
        return err;
      }
    },
  },
  beforeDestroy() {
    clearTimeout(this.timer);
  },
};
</script>
<style scoped lang="stylus">
@import "./index.styl";
</style>
